*,
view,
text {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  line-height: 1;
}

page {
  background-color: #f4f4f7;
}

.uni-nvue-fixed {
  position: fixed;
  z-index: 999;
  top: 0;
}

button {
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
  line-height: 1;
  box-sizing: border-box;

  &::after {
    border: none;
    border-radius: 0;
    content: none;
  }
}

uni-button::after {
  border: none;
  border-radius: 0;
  content: none;
}

.text-white {
  color: #ffffff;
}

.text-primary {
  color: $uni-color-primary;
}

.text-secondary {
  color: $uni-text-color-secondary;
}

.text-warning {
  color: $uni-color-warning;
}

.text-error {
  color: $uni-color-error;
}
.text-info {
  color: $uni-color-info;
}

.text-color {
  color: $uni-text-color;
}

.text-color-grey {
  color: $uni-text-color-grey;
}

.text-color-placeholder {
  color: $uni-text-color-placeholder;
}

.text-color-gold {
  color: $uni-text-color-gold;
}

/* text size */
.text-xs {
  font-size: $uni-font-size-xs;
}

.text-sm {
  font-size: $uni-font-size-sm;
}

.text-base {
  font-size: $uni-font-size-base;
}

.text-lg {
  font-size: $uni-font-size-lg;
}

.text-xl {
  font-size: $uni-font-size-xl;
}

.text-xxl {
  font-size: $uni-font-size-xxl;
}

.text-bold {
  font-weight: bold;
}

/* margin */
.m-xs {
  margin: $uni-spacing-row-xs;
}

.m-sm {
  margin: $uni-spacing-row-sm;
}

.m-base {
  margin: $uni-spacing-row-base;
}

.m-lg {
  margin: $uni-spacing-row-lg;
}

.m-xl {
  margin: $uni-spacing-row-xl;
}

.m-xxl {
  margin: $uni-spacing-row-xxl;
}

.mt-xs {
  margin-top: $uni-spacing-row-xs;
}
.mt-sm {
  margin-top: $uni-spacing-row-sm;
}
.mt-base {
  margin-top: $uni-spacing-row-base;
}
.mt-lg {
  margin-top: $uni-spacing-row-lg;
}
.mt-xl {
  margin-top: $uni-spacing-row-xl;
}
.mt-xxl {
  margin-top: $uni-spacing-row-xxl;
}

.mb-xs {
  margin-bottom: $uni-spacing-row-xs;
}

.mb-sm {
  margin-bottom: $uni-spacing-row-sm;
}

.mb-base {
  margin-bottom: $uni-spacing-row-base;
}

.mb-lg {
  margin-bottom: $uni-spacing-row-lg;
}

.mb-xl {
  margin-bottom: $uni-spacing-row-xl;
}

.mb-xxl {
  margin-bottom: $uni-spacing-row-xxl;
}

.mr-xs {
  margin-right: $uni-spacing-row-xs;
}

.mr-sm {
  margin-right: $uni-spacing-row-sm;
}

.mr-base {
  margin-right: $uni-spacing-row-base;
}

.mr-lg {
  margin-right: $uni-spacing-row-lg;
}

.mr-xl {
  margin-right: $uni-spacing-row-xl;
}

.mr-xxl {
  margin-right: $uni-spacing-row-xxl;
}

.ml-xs {
  margin-left: $uni-spacing-row-xs;
}
.ml-sm {
  margin-left: $uni-spacing-row-sm;
}

.ml-base {
  margin-left: $uni-spacing-row-base;
}

.ml-lg {
  margin-left: $uni-spacing-row-lg;
}

.ml-xl {
  margin-left: $uni-spacing-row-xl;
}

.ml-xxl {
  margin-left: $uni-spacing-row-xxl;
}

.mx-xs {
  margin-left: $uni-spacing-row-xs;
  margin-right: $uni-spacing-row-xs;
}

/* padding */
.p-xs {
  padding: $uni-spacing-row-xs;
}

.p-sm {
  padding: $uni-spacing-row-sm;
}

.p-base {
  padding: $uni-spacing-row-base;
}

.p-lg {
  padding: $uni-spacing-row-lg;
}

.p-xl {
  padding: $uni-spacing-row-xl;
}

.p-xxl {
  padding: $uni-spacing-row-xxl;
}

.pb-xs {
  padding-bottom: $uni-spacing-row-xs;
}

.pb-sm {
  padding-bottom: $uni-spacing-row-sm;
}

.pb-base {
  padding-bottom: $uni-spacing-row-base;
}

.pb-lg {
  padding-bottom: $uni-spacing-row-lg;
}

.pb-xl {
  padding-bottom: $uni-spacing-row-xl;
}

.px-xs {
  padding-left: $uni-spacing-row-xs;
  padding-right: $uni-spacing-row-xs;
}
.px-sm {
  padding-left: $uni-spacing-row-sm;
  padding-right: $uni-spacing-row-sm;
}
.px-base {
  padding-left: $uni-spacing-row-base;
  padding-right: $uni-spacing-row-base;
}
.px-lg {
  padding-left: $uni-spacing-row-lg;
  padding-right: $uni-spacing-row-lg;
}
.px-xl {
  padding-left: $uni-spacing-row-xl;
  padding-right: $uni-spacing-row-xl;
}
.px-xxl {
  padding-left: $uni-spacing-row-xxl;
  padding-right: $uni-spacing-row-xxl;
}

.py-sm {
  padding-top: $uni-spacing-row-sm;
  padding-bottom: $uni-spacing-row-sm;
}
.py-base {
  padding-top: $uni-spacing-row-base;
  padding-bottom: $uni-spacing-row-base;
}
.py-lg {
  padding-top: $uni-spacing-row-lg;
  padding-bottom: $uni-spacing-row-lg;
}
.py-xl {
  padding-top: $uni-spacing-row-xl;
  padding-bottom: $uni-spacing-row-xl;
}
.py-xxl {
  padding-top: $uni-spacing-row-xxl;
  padding-bottom: $uni-spacing-row-xxl;
}
/* display */
.d-block {
  display: block;
}

.d-flex {
  display: flex;
}

/* flex */
@mixin flex-column {
  display: flex;
  flex-direction: column;
}

@mixin flex-row-xy-center {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

@mixin flex-row-y-center {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.d-flex-column {
  display: flex;
  flex-direction: column;
}

.justify-center {
  justify-content: center;
}

.justify-end {
  justify-content: flex-end;
}

.items-center {
  align-items: center;
}

.justify-between {
  justify-content: space-between;
}

.d-flex-row-y-center {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.d-flex-row-xy-center {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.d-flex-column-xy-center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.d-flex-row-c-between-y-center {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.flex-1 {
  flex: 1;
}

.flex-shrink-0 {
  flex-shrink: 0;
}

/* width */
.w-full {
  width: 100%;
}

/* text */
.text-underline {
  text-decoration: underline;
}

.gap-sm {
  gap: $uni-spacing-row-sm;
}

.gap-base {
  gap: $uni-spacing-row-base;
}

.gap-lg {
  gap: $uni-spacing-row-lg;
}

.lh-base {
  line-height: 1.2;
}

/* background */
.bg-white {
  background-color: #fff;
}
